// 引入Count的ui组件
// import UICount from '../../components/Count'
import React, { Component } from 'react'
// 引入connect用于连接UI组件和redux
import {connect} from 'react-redux'
// 引入action
import { createSummaryAction } from '../../redux/actions/person'
import { nanoid } from 'nanoid'
class UIPerson extends Component {
    // state = {name: '', age: '', personList: []}
    // handleChange = (e)=>{
    //     console.log(e.target.value)
    //     this.setState({name: e.target.value})
    // }
    // handleChange1 = (e)=>{
    //     console.log(e.target.value)
    //     this.setState({age: e.target.value * 1})
    // }
    // add = ()=>{
    //     console.log(this.state)
    //     let personList = this.state.personList
    //     personList.push({name: this.state.name, age: this.state.age})
    //     this.setState({personList})
    // }
    add = ()=>{
        const name = this.nameNode.value
        const age = this.ageNode.value
        const personObj = { id: nanoid(), name, age }
        this.props.sum(personObj)
    }
render() {
  return (
      <div>
          <h1>我是Person组件</h1>
          <h1>上方求和为：{this.props.count}</h1>
          {/* <input type="text" onChange={this.handleChange}/>
          <input type="number" onChange={this.handleChange1}/> */}
          <input type="text" ref={c=>this.nameNode = c} placeholder='Please input your name:'/>
          <input type="number" ref={c=>this.ageNode = c} placeholder='Please input your age:'/>
          <button onClick={this.add}>添加</button>
          <ul>
            {
                this.props.personList.map((item, index) => {
                    return <li key={index}>{item.name}--{item.age}</li>
                })
            }
          </ul>
      </div>
  )
}
}
export default connect(
  (state)=>({count: state.sum, personList: state.personList}), 
  // mapDispatchToProps的简写方式（api层级的优化）
  {
    // 方法名：提供的action；这种格式提供给react-redux，api内部就会帮你dispatch分发action
    // add: createIncrementAction,
    // sub: createDecrementAction,
    // addAsync: createIncrementAyncAction
    sum: createSummaryAction
  }
)(UIPerson)